<template>
	<view class="top_horizontal_line"></view>
	<view class="pets_details_box">
		<view class="order_status_box">
			<view class="status_box" @click="viewOrderProgress(orderInfo)">
				<view>
					<view class="order_status">{{ getStatusText(orderInfo.status) }}</view>
					<view class="order_tips" v-if="orderInfo.status === 0">
						订单将在
						<text class="countdowns_time">{{ countdowns.time }}</text>
						后失效，请及时支付。
					</view>
					<view class="order_tips" v-else>{{ getStatusTipsText(orderInfo.status) }}</view>
					<view class="order_tips" v-if="orderInfo.refuseReason">原因：{{ orderInfo.refuseReason }}</view>
				</view>
				<uni-icons v-if="orderType == 0 && orderInfo.status == 1" class="order_status_uni_icons" type="right" size="20"></uni-icons>
			</view>
			<view class="server_img_box" v-if="orderInfo.status == 2 && orderType == 0 && orderInfo?.confirmPic" @click="viewOrderProgress(orderInfo)">
				<view class="server_content_box">
					<view class="imgs_box">
						<image
							v-for="(item, index) in orderInfo?.confirmPic?.split(',')"
							:key="item"
							@click.stop="previewImages(index, orderInfo?.confirmPic?.split(','))"
							class="server_img"
							:src="item"></image>
					</view>
					<uni-icons class="order_status_uni_icons" type="right" size="20"></uni-icons>
				</view>
			</view>
			<view class="server_img_box" v-if="orderInfo.status == 3 && orderType == 0 && orderInfo?.orderServiceDaily?.coverPic" @click="viewOrderProgress(orderInfo)">
				<view class="server_tips">{{ orderInfo?.orderServiceDaily?.title }}</view>
				<view class="server_content_box">
					<view class="imgs_box">
						<image
							v-for="(item, index) in orderInfo?.orderServiceDaily?.coverPic?.split(',')"
							:key="item"
							@click.stop="previewImages(index, orderInfo?.orderServiceDaily?.coverPic?.split(','))"
							class="server_img"
							:src="item"></image>
					</view>
					<uni-icons class="order_status_uni_icons" type="right" size="20"></uni-icons>
				</view>
			</view>
			<view class="multiple_order" v-if="orderInfo.petsitterType == 1">指定陪宠师</view>
		</view>
		<view class="order_info_box">
			<view class="pet_companion_teacher_box" v-if="(orderType == -1 && [2, 3, 4].includes(orderInfo.status)) || (orderType == 0 && orderInfo.petsitterUserId)">
				<view class="pet_teacher_title">陪宠师</view>
				<view class="pet_teacher_info_box">
					<image class="pet_teacher_img" :src="orderInfo.petsitterAvatar"></image>
					<view class="pet_teacher_info">
						<view class="name_contact">
							<view class="pet_teacher_name">{{ orderInfo.petsitterNickName }}</view>
							<view class="contact_btn" v-if="[0, 1, 2, 3].includes(Number(orderInfo.status))" @click="handleContact()">联系TA</view>
						</view>
						<view class="pet_teacher_tel">{{ orderInfo.petsitterRealName }}｜{{ orderInfo.petsitterPhone }}</view>
					</view>
				</view>
			</view>
			<view class="user_address_box">
				<view class="user_info_box">
					<text class="user_name">{{ orderInfo.userNickName }}</text>
					<text class="user_tel">{{ orderInfo.userPhone }}</text>
				</view>
				<view class="user_address">{{ orderInfo.address }}</view>
				<!--				<view class="linear_distance" v-if="Number(orderInfo.realDistance)">-->
				<!--					距工作室{{-->
				<!--						Number(orderInfo.realDistance) >= 1000 ? new BigNumber(orderInfo.realDistance).div(1000).toNumber().toFixed(2) + "KM" : orderInfo.realDistance + "M"-->
				<!--					}}-->
				<!--				</view>-->
			</view>
			<view class="server_info_box">
				<view class="pets_server_box">
					<image class="server_img" :src="orderType == -1 ? orderInfo.goodsAvatar : orderInfo.goodsPic"></image>
					<view class="pets_server_right">
						<view class="server_name">{{ orderInfo.goodsName }}</view>
						<view class="server_detailed">{{ orderInfo.goodsSkuServiceTime }}｜共服务{{ orderInfo.serviceDays }}天｜宠物{{ orderInfo.petNum }}只</view>
					</view>
				</view>
				<view class="other_server_info_box">
					<view class="studio_info_box">
						<view class="other_label_box">工作室</view>
						<view class="other_value_box">
							<image class="studio_img" :src="orderInfo.studioAvatar"></image>
							<view class="studio_name">{{ orderInfo.studioName }}</view>
						</view>
					</view>
					<view class="pets_info_box">
						<view class="other_label_box">宠物信息</view>
						<view class="other_value_box" @click="viewPetsInfo()">
							<view class="pets_box">
								<view class="pets_info" v-for="item in orderInfo.petList" :key="item">
									<image class="pets_img" :src="item.petAvatar"></image>
									<view class="pets_name">{{ item.petNickName }}</view>
									<view class="dividing_line"></view>
									<view class="pets_age">{{ getPetTypeText(item.type) }}</view>
									<view class="dividing_line"></view>
									<view class="pets_age">{{ birthToAgeDiff(item.birthday) }}</view>
								</view>
							</view>
							<uni-icons class="uni_icons" type="right" size="20"></uni-icons>
						</view>
					</view>
					<view class="server_time_info_box">
						<view class="other_label_box">服务时间</view>
						<view class="other_value_box">
							<view class="server_time" v-if="orderType == -1" v-for="(item, index) in orderInfo?.serviceTimeSlotArray" :key="item">
								{{ item?.split(",")[1]?.substring(0, 10) }}
							</view>
							<view class="server_time" v-else>{{ orderInfo?.serviceEndTime?.substring(0, 10) }}</view>
						</view>
					</view>
					<view class="other_info_box">
						<view class="other_label_box">上门时间</view>
						<view class="other_value_box">{{ handleDoorTime(orderInfo.doorTime) }}</view>
					</view>
					<!--					<view class="service_instructions_box" v-if="orderInfo.remarks">-->
					<!--						<view class="other_label_box">服务叮嘱</view>-->
					<!--						<view class="other_value_box">-->
					<!--							{{ orderInfo.remarks }}-->
					<!--						</view>-->
					<!--					</view>-->
				</view>
			</view>
			<view class="user_other_info_box">
				<view class="user_other_box" v-if="orderType == -1 && orderInfo?.expectPetsitterNickname">
					<view class="user_other_label">期望陪宠师</view>
					<view class="user_other_value">
						{{ orderInfo.expectPetsitterNickname }}
					</view>
				</view>
				<view class="user_other_box" v-if="getHandoverTypeText(orderInfo.handoverType, 1)">
					<view class="user_other_label">钥匙给予</view>
					<view class="user_other_value">{{ getHandoverTypeText(orderInfo.handoverType, 1) }}</view>
				</view>
				<view class="user_other_box" v-if="getHandoverTypeText(orderInfo.returnType, 2)">
					<view class="user_other_label">钥匙归还</view>
					<view class="user_other_value">{{ getHandoverTypeText(orderInfo.returnType, 2) }}</view>
				</view>
				<template v-for="(item, i) in orderInfo.remarkList" :key="i">
					<view class="user_other_box" v-if="item?.remarks || item?.imgList?.length">
						<view class="user_other_label">{{ getRemarkTypeText(item) }}</view>
						<view class="user_other_value">
							<view class="fold_con_box">
								<view class="fold_content" v-if="item.isShow">{{ item.remarks }}</view>
								<view class="fold_content" v-else></view>
								<view class="fold_btn" @click.stop="handleChangeShow(item)">
									<view class="btn_text">{{ item.isShow ? "收起" : "展开" }}</view>
									<uni-icons :type="item.isShow ? 'up' : 'down'" size="16" color="#FF6084"></uni-icons>
								</view>
							</view>
							<view class="fold_img_box" v-if="item.imgList.length && item.isShow">
								<image v-for="(val, index) in item.imgList" @click.stop="previewImages(index, item.imgList)" :key="val" class="fold_img" :src="val"></image>
							</view>
						</view>
					</view>
				</template>
			</view>
			<view class="value_added_services_box" v-if="orderInfo?.orderGoodsSkuVOS?.length">
				<view class="add_title">增值服务</view>
				<view class="add_order_list_box">
					<view class="add_order_item" v-for="item in orderInfo.orderGoodsSkuVOS" :key="item.skuId">
						<image class="add_server_img" :src="item.goodsAvatar"></image>
						<view class="add_server_info">
							<view class="add_server_name">{{ item.goodsName }}</view>
							<view class="add_server_price">
								<view class="price">￥{{ item.price }}/次</view>
								<view class="times">×{{ item.serviceDays }}</view>
							</view>
							<view class="add_server_pets" v-if="item?.petVOList?.length || (orderType == -1 ? item?.serviceDateStr : item?.serviceDate)">
								<template v-if="item?.petVOList?.length">
									<text v-for="(val, i) in item.petVOList" :key="i">
										<template v-if="orderType == -1">
											<template v-if="item?.serviceDateStr?.split(',').length">
												<text class="pet_name_date" v-for="(itemVal, itemValIndex) in item?.serviceDateStr?.split(',')" :key="itemValIndex">
													{{ val.petNickName }}({{ itemVal }})
												</text>
											</template>
											<text class="pet_name_date" v-else>
												{{ val.petNickName }}
											</text>
										</template>
										<text class="pet_name_date" v-else>{{ val.petNickName }}({{ item?.serviceDate?.substring(0, 10) }})</text>
									</text>
								</template>
								<template class="" v-else>
									<template v-if="orderType == -1">
										<text class="pet_name_date" v-for="(itemVal, itemValIndex) in item?.serviceDateStr?.split(',')" :key="itemValIndex">
											{{ itemVal }}
										</text>
									</template>
									<text class="pet_name_date" v-else>{{ item?.serviceDate?.substring(0, 10) }}</text>
								</template>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="order_data_info_box">
				<view class="order_data_info">
					<view class="order_data_label">基础费</view>
					<view class="order_data_value">¥{{ Number(orderInfo.baseAmount) }}</view>
				</view>
				<view class="order_data_info" v-if="Number(orderInfo.extAmountObj?.count_amount)">
					<view class="order_data_label">多宠加价</view>
					<view class="order_data_value">¥{{ Number(orderInfo.extAmountObj?.count_amount) }}</view>
				</view>
				<view class="order_data_info" v-if="Number(orderInfo.extServiceAmount)">
					<view class="order_data_label">增值服务</view>
					<view class="order_data_value">¥{{ Number(orderInfo.extServiceAmount) }}</view>
				</view>
				<view class="order_data_info order_total">
					<view class="order_data_label">{{ getPayText(orderInfo.status) }}：</view>
					<view class="order_data_value">¥{{ Number(orderInfo.payAmount) }}</view>
				</view>
			</view>
			<view class="order_data_info_box">
				<view class="order_data_info">
					<view class="order_data_label">订单号</view>
					<view class="order_data_value">
						<view class="">{{ orderInfo.id }}</view>
						<view class="dividing_line"></view>
						<view class="copy_btn" @click="onCopy(orderInfo.id)">复制</view>
					</view>
				</view>
				<view class="order_data_info">
					<view class="order_data_label">创建时间</view>
					<view class="order_data_value">{{ orderInfo.createTime }}</view>
				</view>
				<!--        <view class="order_data_info" v-if="getPayTypeText(orderInfo.payType)">-->
				<!--          <view class="order_data_label">支付方式</view>-->
				<!--          <view class="order_data_value">{{ getPayTypeText(orderInfo.payType) }}</view>-->
				<!--        </view>-->
				<view class="order_data_info" v-if="orderInfo.payTime">
					<view class="order_data_label">支付时间</view>
					<view class="order_data_value">{{ orderInfo.payTime }}</view>
				</view>
				<view class="order_data_info" v-if="orderInfo.acceptTime">
					<view class="order_data_label">接单时间</view>
					<view class="order_data_value">{{ orderInfo.acceptTime }}</view>
				</view>
				<view class="order_data_info" v-if="orderInfo.confirmTime">
					<view class="order_data_label">到达时间</view>
					<view class="order_data_value">{{ orderInfo.confirmTime }}</view>
				</view>
				<view class="order_data_info" v-if="orderInfo.finishTime">
					<view class="order_data_label">完成时间</view>
					<view class="order_data_value">{{ orderInfo.finishTime }}</view>
				</view>
				<view class="order_data_info" v-if="orderInfo.cancelTime">
					<view class="order_data_label">取消时间</view>
					<view class="order_data_value">{{ orderInfo.cancelTime }}</view>
				</view>
			</view>
		</view>
		<view class="footer_btn_box">
			<template v-if="orderType == -1">
				<view class="xjs-btn-primary-plain hollow_btn btn_mg" v-if="[0, 1, 8].includes(Number(orderInfo.status))" @click="handleCancelAllOrder(orderInfo)">取消订单</view>
				<view
					class="xjs-btn-primary-plain hollow_btn btn_mg"
					v-if="[0, 1, 8].includes(Number(orderInfo.status)) && orderInfo.type === 0"
					@click="handleEditOrder(orderInfo)">
					修改订单
				</view>
				<view class="xjs-btn-primary solid_btn btn_mg" v-if="[0].includes(Number(orderInfo.status))" @click="handlePay(orderInfo)">立即付款</view>
			</template>
			<template v-else>
				<view class="xjs-btn-primary-plain hollow_btn btn_mg" v-if="[1].includes(Number(orderInfo.status))" @click="handleCancel(orderInfo)">取消订单</view>
				<view class="xjs-btn-primary-plain hollow_btn btn_mg" v-if="[1].includes(Number(orderInfo.status)) && orderInfo.type === 0" @click="handleEditOrder(orderInfo)">
					修改订单
				</view>
				<view class="xjs-btn-primary solid_btn btn_mg" v-if="[1].includes(Number(orderInfo.status)) && orderInfo.type === 0" @click="handleBuyAddServer(orderInfo)">
					购买增值服务
				</view>
				<view
					class="xjs-btn-primary solid_btn"
					v-if="[3].includes(Number(orderInfo.status)) && !orderInfo?.assess && orderInfo.type === 0"
					@click.stop="handleComment(orderInfo)">
					服务评价
				</view>
			</template>
		</view>
	</view>
	<petsInfoPop ref="petsInfoRef"></petsInfoPop>
	<paymentPopup ref="paymentPopupRef" @confirm="paySuccess" @fail="payFail"></paymentPopup>
	<image @tap="handlekf('400-154-1313')" class="kefu" src="https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-62.png" mode="widthFix"></image>
</template>
<script setup>
import { ref, reactive, onUnmounted } from "vue";
import { onLoad, onShow, onBackPress } from "@dcloudio/uni-app";
import { formatTime, birthToAgeDiff } from "@/hooks/useFunction";
import petsInfoPop from "../components/petsInfoPop/index.vue";
import api from "@/api/index";
import { payment } from "@/hooks/usePay";
import BigNumber from "bignumber.js";

let orderId = ref();
let orderType = ref();
let ispreviewImage = ref(false);

let orderInfo = reactive({});

// 联系客服
const handlekf = (item) => {
	uni
		.showModal({
			title: "提示",
			content: "客服上班时间：周一到周六 09:30~18:30",
			confirmText: "确定呼叫"
		})
		.then((e) => {
			console.log(e);
			if (e.confirm) {
				uni.makePhoneCall({
					phoneNumber: item
				});
			}
		});
};
const handleDoorTime = (data) => {
	if (data) {
		let dataArr = data?.split("~");
		if (dataArr[0] == "00:00" && dataArr[1] == "00:00") {
			return "无时间段要求";
		} else {
			return data;
		}
	} else {
		return data;
	}
};
// 展开收起
const handleChangeShow = (item) => {
	// showInfo[type] = !showInfo[type];
	item.isShow = !item.isShow;
};
const getRemarkTypeText = (item) => {
	// 服务叮嘱json: [{"type": 0-其他; 1-宠物粮、罐头、零食位置; 2-饮用水位置; 3-猫砂和猫砂盆位置; 4-牵引绳位置, "imgs":[],"remakrs": ""}]
	switch (Number(item.type)) {
		case 0:
			return "其它事项";
		case 1:
			return "宠物食物";
		case 2:
			return "饮用水";
		case 3:
			return "厕所位置";
		case 4:
			return "牵引绳";
	}
};
const getStatusText = (status) => {
	if (orderType.value == -1) {
		switch (status) {
			case 0:
				return "待付款";
			case 1:
			case 8:
				return "待接单";
			case 2:
			case 3:
				return "已接单";
			case 4:
				return "已完成";
			case 5:
			case 6:
			case 7:
				return "已取消";
			default:
				return "";
		}
	} else {
		switch (status) {
			case 0:
				return "待接单";
			case 1:
				return "待服务";
			case 2:
				return "服务中";
			case 3:
				return "已完成";
			case 4:
			case 5:
				return "已取消";
			case 6:
				return "待付款";
			default:
				return "";
		}
	}
};

// onBackPress(() => {
// 	console.log(111);
// 	uni.reLaunch({ url: `/pages/petsOrder/petsList/index` });
// 	return true;
// });
const getStatusTipsText = (status) => {
	// --总单订单状态: 0-待付款; 1-待接单; 2-待服务; 3-服务中; 4-已完成; 5-已关闭; 6-已取消; 7-已退款 8-待派单
	// --日单状态:    1-待服务; 2-服务中 3-已完成(已结算); 4-已退款; 5-已关闭
	if (orderType.value == -1) {
		switch (status) {
			case 0:
				return "";
			case 1:
			case 8:
				return "等待陪宠师接单";
			case 2:
				return "";
			case 3:
				return "";
			case 4:
				return "";
			case 5:
			case 6:
			case 7:
				if (orderInfo.cancelType == 1) {
					return "用户主动取消";
				} else if (orderInfo.cancelType == 2) {
					return "店长取消";
				} else if (orderInfo.cancelType == 3) {
					return "陪宠师取消";
				} else {
					return "";
				}
			default:
				return "";
		}
	} else {
		switch (status) {
			case 1:
				return "您可以提前和陪宠师沟通上门时间以及其他细节";
			case 2:
				return "陪宠师已经到达，开始服务";
			case 3:
				return "陪宠师已经完成服务";
			case 4:
			case 5:
				if (orderInfo.cancelType == 1) {
					return "用户主动取消";
				} else if (orderInfo.cancelType == 2) {
					return "店长取消";
				} else if (orderInfo.cancelType == 3) {
					return "陪宠师取消";
				} else {
					return "订单已取消";
				}
			default:
				return "";
		}
	}
};
const getPetTypeText = (type) => {
	switch (type) {
		case 0:
			return "猫";
		case 1:
			return "狗";
		default:
			return "其他";
	}
};
// 交接方式: 0-有人在家;1-密码;2-丰巢存件;3-其他; 4-面交; 5-快递; 6-闪送; 7-放在指定位置;
const getHandoverTypeText = (status, type) => {
	switch (status) {
		case 0:
			return "有人在家";
		case 1:
			return "密码锁";
		case 2:
			return "丰巢存件";
		case 3:
			if (type === 1) {
				return orderInfo.handoverRemarks;
			} else if (type === 2) {
				return orderInfo.returnRemarks;
			} else {
				return "";
			}
		case 4:
			return "面交";
		case 5:
			return "快递";
		case 6:
			return "闪送";
		case 7:
			return "放在指定位置";
		default:
			return "";
	}
};
const getPayTypeText = (status) => {
	switch (status) {
		case 1:
			return "抖音支付";
		case 2:
			return "支付宝";
		case 3:
			return "微信支付";
		default:
			return "";
	}
};
const getPayText = (type) => {
	if (orderType.value == -1) {
		switch (type) {
			case 0:
				return "应付";
			case 5:
			case 6:
			case 7:
				return "合计";
			default:
				return "实付";
		}
	} else {
		switch (type) {
			case 4:
			case 5:
				return "合计";
			default:
				return "实付";
		}
	}
};

const viewOrderProgress = async (item) => {
	if (orderType.value == 0) {
		uni.navigateTo({
			url: `/pages/petsOrder/orderProcess/index?orderId=${item.id}&studioId=${item.studioId}`
		});
	}
};
const previewImages = (currentIndex, urls) => {
	ispreviewImage.value = true;
	uni.previewImage({
		current: currentIndex,
		urls
	});
};
const getOrderDetail = async () => {
	let url = "";
	if (orderType.value == -1) {
		url = `/mall/order/detail/${orderId.value}`;
	} else {
		url = `/mall/order/order-detail/dayOrderDetail?id=${orderId.value}`;
	}
	const res = await api({
		method: "get",
		url: url,
		contentType: "json"
	});
	if (res.code === 0) {
		res.data.extAmountObj = JSON.parse(res.data?.extAmountJson) || {};
		// 服务叮嘱json: [{"type": 0-其他; 1-宠物粮、罐头、零食位置; 2-饮用水位置; 3-猫砂和猫砂盆位置; 4-牵引绳位置, "imgs":[],"remakrs": ""}]
		res.data.remarkList = JSON.parse(res.data?.remarks) || [];
		// res.data.remarkList = [
		// 	{ type: 0, imgs: ["/static/logo.png"], remakrs: "其他" },
		// 	{
		// 		type: 1,
		// 		imgs: ["/static/logo.png"],
		// 		remakrs: "宠物粮、罐头、零食位置宠物粮、罐头、零食位置宠物粮、罐头、零食位置宠物粮、罐头、零食位置宠物粮、罐头、零食位置"
		// 	},
		// 	{ type: 2, imgs: ["/static/logo.png"], remakrs: "饮用水位置" },
		// 	{ type: 3, imgs: ["/static/logo.png"], remakrs: "猫砂和猫砂盆位置" },
		// 	{ type: 4, imgs: ["/static/logo.png"], remakrs: "牵引绳位置" }
		// ];
		res.data.remarkList.forEach((item) => {
			item.isShow = false;
			item.imgList = item.imgs ? item.imgs?.split(",") : [];
		});
		Object.assign(orderInfo, res.data);
		if (orderInfo.status === 0) {
			if (orderInfo.orderAutoCancelTime) {
				const duration = formatTime(orderInfo.orderAutoCancelTime).getTime() - Date.now();
				if (duration > 0) {
					onCountdownCheck();
				}
			}
		}
	}
};

let petsInfoRef = ref();
const viewPetsInfo = () => {
	petsInfoRef.value.handleOpenPop(JSON.stringify(orderInfo.petList));
};

const paymentPopupRef = ref(null);
const handlePay = async () => {
	// #ifndef MP-TOUTIAO
	// 该弹窗用于非抖音支付，包括微信、支付宝等
	// 使用该弹窗时需要添加条件编译，避免抖音支付调用该弹窗
	// 组件全局注册，可以不用import引入

	// data 所需参数
	// checkOrderType: 订单检验和支付成功后续功能 petsService 宠物服务，具体名称查询 pages/share/aliPayForQR/index.vue 页面的 checkList
	// payAmount: 订单金额
	// payBusinessType: 支付业务类型 1-服务订单支付  2保证金支付
	// orderId: 订单id， payBusinessType为2时可不传

	// <paymentPopup ref="paymentPopupRef" @confirm='xxx' />
	await getOrderDetail();
	await paymentPopupRef.value.open({
		orderId: orderInfo.id,
		payAmount: orderInfo.payAmount,
		payBusinessType: 1,
		checkOrderType: "petsService"
	});
	// #endif

	// #ifdef MP-TOUTIAO
	let res = await payment({
		payType: 1,
		orderId: orderInfo.id,
		payBusinessType: 1,
		amount: orderInfo.payAmount
	});
	if (res) {
		uni.showToast({
			title: "支付成功",
			icon: "none",
			duration: 1000
		});
		setTimeout(async () => {
			await getOrderDetail();
		}, 1000);
	} else {
		uni.showToast({
			title: "支付失败",
			icon: "none",
			duration: 1000
		});
	}
	// #endif
};
// 支付成功
const paySuccess = async (data) => {
	uni.navigateTo({
		url: `/pages/payment/successfulPayment/index?orderId=${data.orderId}`
	});
	paymentPopupRef.value.close();
	await getOrderDetail();
};
// 支付失败
const payFail = async () => {
	paymentPopupRef.value.close();
	await getOrderDetail();
};

// 评价
const handleComment = async (item) => {
	uni.navigateTo({
		url: `/pages/petsOrder/evaluation/index?orderId=${item.id}&isSuperiorOrder=${orderType.value}&studioId=${item?.studioId}`
	});
};
// 获取其他待服务日单
const getOtherDayOrder = async (item) => {
	return new Promise(async (resolve, reject) => {
		const res = await api({
			method: "get",
			url: `/mall/order/order-detail/getJoinOrderDetail`,
			data: {
				orderId: item.orderId,
				orderDetailId: item.id
			}
		});
		if (res.code == 0) {
			if (res.data.length > 1) {
				resolve(true);
			} else {
				resolve(false);
			}
		} else {
			reject(false);
		}
	});
};
// 陪宠师取消订单
const handleCancel = async (item) => {
	const res = await getOtherDayOrder(item);
	if (res) {
		uni.navigateTo({
			url: `/pages/petsOrder/cancellationOrder/index?orderId=${item.orderId}&orderDetailId=${item.id}&orderType=${orderType.value}`
		});
	} else {
		uni.showModal({
			title: "确定取消订单吗？",
			content: "注意：确定后订单将关闭",
			success: async (res) => {
				if (res.confirm) {
					uni.navigateTo({
						url: `/pages/petsOrder/cancellationReason/index?orderId=${item.orderId}&orderDetailId=${item.id}&checkedList=${item.id}&orderType=${orderType.value}`
					});
				}
			}
		});
	}
};
// 总单取消订单
const handleCancelAllOrder = async (item) => {
	uni.showModal({
		title: "确定取消订单吗？",
		content: "注意：确定后订单将关闭",
		success: async (res) => {
			if (res.confirm) {
				uni.navigateTo({
					url: `/pages/petsOrder/cancellationReason/index?orderId=${item.id}&orderType=${orderType.value}`
				});
			}
		}
	});
};
// 修改订单
const handleEditOrder = async (item) => {
	ispreviewImage.value = false;
	uni.navigateTo({ url: `/pages/petsOrder/editOrder/index?orderId=${item.id}&orderType=${orderType.value}` });
};
//购买增值服务
const handleBuyAddServer = async (item) => {
	uni.navigateTo({
		url: `/pages/payment/extraService/index?orderId=${item.id}`
	});
};
// 删除
const handleDelete = async (item) => {
	uni.showModal({
		title: "提示",
		content: "确定删除订单吗？",
		success: async (res) => {
			if (res.confirm) {
				const res = await api({
					method: "post",
					url: `/mall/order/delete`,
					data: {
						id: item.id
					}
				});
				if (res.code == 0) {
					uni.showToast({
						title: "操作成功",
						icon: "none"
					});
					uni.navigateBack({
						delta: 1
					});
				} else {
					uni.showToast({
						title: res.msg,
						icon: "none"
					});
				}
			}
		}
	});
};
// 联系陪宠师
const handleContact = () => {
	uni.navigateTo({
		url: `/pages/im/message/index?id=${orderInfo.petsitterUserId}&username=${orderInfo.petsitterNickName}&avatar=${orderInfo.petsitterAvatar}`
	});
};
const viewServiceRecord = () => {
	uni.navigateTo({
		url: `/pages/petsOrder/serviceRecord/index?id=${orderId.value}&goodsName=${orderInfo.goodsName}&serviceDays=${orderInfo.serviceDays}&petNum=${orderInfo.petNum}`
	});
};
const countdowns = reactive({
	timer: null,
	time: "",
	once: false
});
const onCountdownCheck = () => {
	if (countdowns.timer) clearTimeout(countdowns.timer);
	const duration = formatTime(orderInfo.orderAutoCancelTime).getTime() - Date.now();
	console.log(duration);
	if (duration > 0) {
		if (!countdowns.once) countdowns.once = true;
		countdowns.time = onCountdownTransform(duration);
		countdowns.timer = setTimeout(onCountdownCheck, 1000);
	} else {
		uni.showModal({
			title: "提示",
			content: "订单状态已变更",
			showCancel: false,
			success: () => {
				uni.navigateBack();
			}
		});
		countdowns.time = "";
		getOrderDetail();
	}
};

const onCountdownTransform = (duration) => {
	const hour = Math.floor(duration / (1000 * 60 * 60));
	const minute = Math.floor((duration - hour * 1000 * 60 * 60) / (1000 * 60));
	const seconds = Math.floor((duration % (1000 * 60)) / 1000);
	if (Number(hour) > 0) {
		return `${hour.toString().padStart(2, "0")}时${minute.toString().padStart(2, "0")}分${seconds.toString().padStart(2, "0")}秒`;
	} else if (Number(minute) > 0) {
		return `${minute.toString().padStart(2, "0")}分${seconds.toString().padStart(2, "0")}秒`;
	} else if (Number(seconds) > 0) {
		return `${seconds.toString().padStart(2, "0")}秒`;
	}
};
const onCopy = (id) => {
	uni.setClipboardData({
		data: id
	});
};

onLoad(async (options) => {
	orderId.value = options.id;
	orderType.value = options.orderType;
});
onShow(async () => {
	if (!ispreviewImage.value) {
		await getOrderDetail();
	}
});
onUnmounted(() => {
	if (countdowns.timer) clearTimeout(countdowns.timer);
});
</script>

<style scoped lang="scss">
.pets_details_box {
	width: 100%;
	padding-bottom: calc(constant(safe-area-inset-bottom) + 104rpx + 28rpx);
	padding-bottom: calc(env(safe-area-inset-bottom) + 104rpx + 28rpx);

	.order_status_box {
		position: relative;
		display: flex;
		flex-direction: column;
		width: 100%;
		min-height: 226rpx;
		padding: 48rpx 32rpx;
		padding-bottom: 90rpx;
		box-sizing: border-box;
		background: linear-gradient(180deg, #ff7d9e 18%, #ffb796 100%);
		border-radius: 0rpx 0rpx 40rpx 40rpx;

		.status_box {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.order_status {
			font-weight: bold;
			font-size: 40rpx;
			color: #ffffff;
		}

		.order_tips {
			font-weight: 400;
			font-size: 26rpx;
			color: #ffffff;
			margin-top: 8rpx;

			.countdowns_time {
				color: #1b2120;
			}
		}

		.multiple_order {
			position: absolute;
			top: 40rpx;
			right: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 162rpx;
			height: 42rpx;
			background: #ffffff;
			border-radius: 38rpx;
			font-weight: 400;
			font-size: 26rpx;
			color: #ff6084;
			padding: 8rpx 16rpx;
			box-sizing: border-box;
		}

		.server_img_box {
			margin-top: 16rpx;
			width: 100%;

			.server_tips {
				font-weight: bold;
				font-size: 26rpx;
				color: #ffffff;
				margin-top: 8rpx;
			}

			.server_content_box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				margin-top: 8rpx;

				.imgs_box {
					.server_img {
						width: 160rpx;
						height: 213rpx;
						margin-right: 16rpx;
					}
				}
			}
		}
	}

	.order_info_box {
		position: relative;
		width: 100%;
		padding: 0 32rpx;
		box-sizing: border-box;
		margin-top: -48rpx;

		.pet_companion_teacher_box {
			width: 100%;
			background: #ffffff;
			border-radius: 24rpx;
			padding: 32rpx;
			box-sizing: border-box;
			margin-bottom: 24rpx;

			.pet_teacher_title {
				font-weight: bold;
				font-size: 26rpx;
				color: #1b2120;
				padding-bottom: 24rpx;
				border-bottom: 1rpx solid #e4e6e6;
			}

			.pet_teacher_info_box {
				display: flex;
				align-items: center;
				margin-top: 24rpx;

				.pet_teacher_img {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
				}

				.pet_teacher_info {
					margin-left: 32rpx;
					width: calc(100% - 120rpx - 32rpx);

					.name_contact {
						display: flex;
						justify-content: space-between;

						.pet_teacher_name {
							font-weight: bold;
							font-size: 36rpx;
							color: #1b2120;
						}

						.contact_btn {
							display: flex;
							justify-content: center;
							align-items: center;
							width: 122rpx;
							height: 42rpx;
							background: #ffffff;
							border-radius: 38rpx;
							border: 2rpx solid #ff6084;
							font-weight: 400;
							font-size: 26rpx;
							color: #ff6084;
						}
					}

					.pet_teacher_tel {
						font-weight: 400;
						font-size: 26rpx;
						color: #7c807f;
						margin-top: 16rpx;
					}
				}
			}
		}

		.user_address_box {
			width: 100%;
			background: #ffffff;
			border-radius: 24rpx;
			padding: 32rpx 32rpx;
			box-sizing: border-box;

			.user_info_box {
				display: flex;
				flex-direction: row;

				.user_name {
					font-weight: bold;
					font-size: 36rpx;
					color: #1b2120;
				}

				.user_tel {
					font-weight: 400;
					font-size: 30rpx;
					color: #1b2120;
					margin-top: 6rpx;
					margin-left: 24rpx;
				}
			}

			.user_address {
				font-weight: 400;
				font-size: 30rpx;
				color: #7c807f;
				line-height: 1.6;
				margin-top: 16rpx;
			}

			.linear_distance {
				font-weight: 400;
				font-size: 30rpx;
				color: #ff6084;
				margin-top: 32rpx;
			}
		}

		.server_info_box {
			margin-top: 24rpx;
			width: 100%;
			padding: 40rpx 32rpx 0;
			box-sizing: border-box;
			background: #ffffff;
			border-radius: 24rpx;
			line-height: 1;

			.pets_server_box {
				display: flex;
				align-items: center;
				padding-bottom: 48rpx;
				border-bottom: 1rpx solid #e4e6e6;

				.server_img {
					width: 120rpx;
					height: 120rpx;
					border-radius: 24rpx;
				}

				.pets_server_right {
					margin-left: 32rpx;
					width: calc(100% - 120rpx - 32rpx);

					.server_name {
						font-weight: bold;
						font-size: 36rpx;
						color: #1b2120;
					}

					.server_detailed {
						display: flex;
						align-items: center;
						margin-top: 32rpx;
						font-weight: 400;
						font-size: 26rpx;
						color: #7c807f;
					}
				}
			}

			.other_server_info_box {
				.studio_info_box {
					display: flex;
					align-items: center;

					.other_label_box {
						font-weight: bold;
						font-size: 26rpx;
						width: 120rpx;
						color: #1b2120;
					}

					.other_value_box {
						display: flex;
						align-items: center;
						margin-left: 32rpx;
						padding: 48rpx 0;
						width: calc(100% - 120rpx - 32rpx);
						box-sizing: border-box;

						.studio_img {
							width: 64rpx;
							height: 64rpx;
							border-radius: 50%;
						}

						.studio_name {
							font-weight: 400;
							font-size: 30rpx;
							color: #1b2120;
							margin-left: 8rpx;
						}
					}
				}

				.pets_info_box {
					display: flex;

					.other_label_box {
						font-weight: bold;
						font-size: 26rpx;
						width: 120rpx;
						color: #1b2120;
						margin-top: 70rpx;
					}

					.other_value_box {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-left: 32rpx;
						padding: 46rpx 0;
						width: calc(100% - 120rpx - 32rpx);
						box-sizing: border-box;
						border-top: 1rpx solid #e4e6e6;

						.pets_box {
							.pets_info {
								display: flex;
								align-items: center;
								margin-bottom: 24rpx;

								.pets_img {
									width: 64rpx;
									height: 64rpx;
									border-radius: 36rpx 36rpx 36rpx 36rpx;
								}

								.pets_name {
									font-weight: 400;
									font-size: 30rpx;
									color: #1b2120;
									margin-left: 8rpx;
								}

								.dividing_line {
									width: 2rpx;
									height: 24rpx;
									background: #cacccc;
									margin: 0 8rpx;
								}

								.pets_age {
									font-weight: 400;
									font-size: 26rpx;
									color: #5c5e5e;
								}
							}

							.pets_info:last-child {
								margin-bottom: 0;
							}
						}

						.uni_icons {
							color: #666;
						}
					}
				}

				.server_time_info_box {
					display: flex;
					margin-bottom: 10rpx;

					.other_label_box {
						font-weight: bold;
						width: 120rpx;
						font-size: 26rpx;
						color: #1b2120;
						padding-top: 48rpx;
						box-sizing: border-box;
					}

					.other_value_box {
						margin-left: 32rpx;
						padding: 14rpx 0 48rpx 0;
						width: calc(100% - 120rpx - 32rpx);
						box-sizing: border-box;
						border-top: 1rpx solid #e4e6e6;

						.server_time {
							font-weight: 400;
							font-size: 28rpx;
							color: #1b2120;
							margin-top: 32rpx;
							word-break: break-word;
							display: inline-block;
							margin-right: 32rpx;
						}
					}
				}

				.other_info_box {
					display: flex;
					align-items: center;
					margin-bottom: 10rpx;

					.other_label_box {
						font-weight: bold;
						font-size: 26rpx;
						color: #1b2120;
						width: 120rpx;
					}

					.other_value_box {
						display: flex;
						align-items: center;
						margin-left: 32rpx;
						padding: 48rpx 0;
						width: calc(100% - 120rpx - 32rpx);
						box-sizing: border-box;
						border-top: 1rpx solid #e4e6e6;
						font-weight: 400;
						font-size: 30rpx;
						color: #1b2120;
					}
				}

				.service_instructions_box {
					display: flex;
					align-items: center;
					margin-bottom: 10rpx;

					.other_label_box {
						font-weight: bold;
						font-size: 26rpx;
						color: #1b2120;
						width: 120rpx;
					}

					.other_value_box {
						display: flex;
						align-items: center;
						margin-left: 32rpx;
						padding: 48rpx 0;
						width: calc(100% - 120rpx - 32rpx);
						box-sizing: border-box;
						border-top: 1rpx solid #e4e6e6;
						font-weight: 400;
						font-size: 30rpx;
						color: #1b2120;
						word-break: break-word;
					}
				}

				.order_total_money {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					margin-top: 46rpx;

					.order_money {
						font-weight: bold;
						font-size: 30rpx;
						color: #1b2120;
					}

					.uni_icons {
						color: #1b2120;
					}
				}
			}
		}

		.user_other_info_box:not(:empty) {
			width: 100%;
			background: #ffffff;
			border-radius: 24rpx;
			padding: 0 40rpx 32rpx;
			box-sizing: border-box;
			margin-top: 24rpx;

			.user_other_box {
				box-sizing: border-box;
				display: flex;
				flex-direction: row;

				.user_other_label {
					width: 132rpx;
					font-weight: bold;
					font-size: 26rpx;
					color: #1b2120;
					padding: 48rpx 0;
				}

				.user_other_value {
					width: calc(100% - 132rpx - 24rpx);
					padding: 44rpx 0;
					font-weight: 400;
					font-size: 30rpx;
					color: #1b2120;
					border-bottom: 1rpx solid #e4e6e6;
					box-sizing: border-box;
					margin-left: 24rpx;

					.fold_con_box {
						display: flex;
						justify-content: space-between;

						.fold_content {
						}

						.fold_btn {
							display: flex;
							flex-direction: row;
							align-items: center;

							.btn_text {
								font-weight: 400;
								font-size: 24rpx;
								color: #ff6084;
							}
						}
					}

					.fold_img_box {
						display: flex;
						flex-direction: row;
						margin-top: 32rpx;

						.fold_img {
							width: 160rpx;
							height: 160rpx;
							border-radius: 4rpx;
							border: 1rpx solid #e4e6e6;
						}
					}
				}
			}

			.user_other_box:last-child {
				.user_other_label {
					padding-bottom: 0;
				}

				.user_other_value {
					border-bottom: none;
					padding-bottom: 0;
				}
			}
		}

		.user_other_info_box:empty {
		}

		.value_added_services_box {
			width: 100%;
			background: #ffffff;
			border-radius: 24rpx;
			padding: 32rpx;
			box-sizing: border-box;
			margin-top: 24rpx;

			.add_title {
				font-weight: bold;
				font-size: 26rpx;
				color: #1b2120;
				padding-bottom: 24rpx;
				box-sizing: border-box;
				border-bottom: 1rpx solid #e4e6e6;
			}

			.add_order_list_box {
				.add_order_item {
					display: flex;
					flex-direction: row;
					margin-top: 48rpx;

					.add_server_img {
						width: 120rpx;
						height: 120rpx;
						border-radius: 24rpx;
					}

					.add_server_info {
						width: calc(100% - 120rpx - 32rpx);
						padding-bottom: 48rpx;
						border-bottom: 1rpx solid #e4e6e6;
						margin-left: 32rpx;

						.add_server_name {
							font-weight: bold;
							font-size: 30rpx;
							color: #1b2120;
							margin-top: 10rpx;
						}

						.add_server_price {
							display: flex;
							justify-content: space-between;
							margin-top: 38rpx;

							.price {
								font-weight: 400;
								font-size: 26rpx;
								color: #7c807f;
							}

							.times {
								font-weight: bold;
								font-size: 26rpx;
								color: #1b2120;
							}
						}

						.add_server_pets {
							width: 100%;
							background: #f5f6f7;
							border-radius: 12rpx;
							padding: 24rpx 24rpx 8rpx 24rpx;
							box-sizing: border-box;
							margin-top: 16rpx;
							line-height: 1;

							.pet_name_date {
								display: inline-block;
								margin-bottom: 24rpx;
								font-weight: 400;
								font-size: 24rpx;
								color: #7c807f;
								margin-right: 24rpx;
							}
						}
					}
				}

				.add_order_item:last-child {
					.add_server_info {
						border-bottom: none;
						padding-bottom: 0;
					}
				}
			}
		}

		.order_data_info_box {
			width: 100%;
			background: #ffffff;
			border-radius: 24rpx;
			padding: 40rpx 32rpx;
			box-sizing: border-box;
			margin-top: 24rpx;

			.order_data_info {
				display: flex;
				justify-content: space-between;
				margin-bottom: 40rpx;

				.order_data_label {
					font-weight: 400;
					font-size: 28rpx;
					color: #5c5e5e;
				}

				.order_data_value {
					display: flex;
					align-items: center;
					font-weight: 400;
					font-size: 28rpx;
					color: #1b2120;

					.order_data_value_text {
						font-weight: 400;
						font-size: 28rpx;
						color: #1b2120;
					}

					.dividing_line {
						width: 2rpx;
						height: 28rpx;
						margin: 0 20rpx;
						background: #1b2120;
					}

					.copy_btn {
						font-weight: 400;
						font-size: 28rpx;
						color: #ff6084;
						text-decoration-line: underline;
					}
				}
			}

			.order_total {
				font-weight: bold;
				padding-top: 30rpx;
				border-top: 1px solid #e4e6e6;

				.order_data_label,
				.order_data_value {
					color: #1b2120;
					font-weight: bold;
				}
			}

			.order_data_info:last-child {
				margin-bottom: 0;
			}
		}
	}

	.footer_btn_box:not(:empty) {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		display: flex;
		justify-content: flex-end;
		margin-top: 28rpx;
		background: #ffffff;
		border-top: 1rpx solid #e4e6e6;
		padding: 8rpx 34rpx;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 8rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 8rpx);
		box-sizing: border-box;

		.hollow_btn {
			box-sizing: border-box;
			width: 222rpx;
			height: 88rpx;
		}

		.solid_btn {
			box-sizing: border-box;
			width: 222rpx;
			height: 88rpx;
		}

		.btn_mg {
			margin-right: 8rpx;
		}

		.btn_mg:last-child {
			margin-right: 0;
		}
	}

	.footer_btn_box:empty {
	}
}

.m_r_8 {
	margin-right: 8rpx;
}
</style>
